<template>
	<view class="coupon">
		<u-sticky>
			<view class="header_box w100">
				<view class="nav_list_box flex">
					<view class="auto_box" v-for="(item, index) in navList" :key="index" @click="onNav(index)">
						<view :class="[navListIndex == index ? 'nav_list_active' : 'nav_list', 's32', 'fblod', 'familytow']">
							{{ item.name }}
						</view>
						<view class="auto_xian" v-if="navListIndex == index"></view>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="cop_warp">
			<view :class="['cop_list_box', { cop_list_box_two: item.type == 'discount' }]" v-for="(item, index) in list" :key="index">
				<view class="top_box flex">
					<view style="font-size: 0">
						<image style="width: 112upx; height: 112upx; border-radius: 8upx" :src="item.good.thumbnail" mode=""></image>
					</view>
					<view class="con_txt" style="flex: 1">
						<view class="con_name s26 fblod familytow">
							{{ spceType(item.good.name, item.good.difference, item.good.spec_type) }}
						</view>
						<view v-if="item.enddate == '0000-00-00'" class="con_date s20 family f500">无限期</view>
						<view v-else class="con_date s20 family f500">{{ get_dates(item.end_time) }} 到期</view>
					</view>
					<view :class="['youhui_money_box', { ysx: navListIndex != 0 }]">
						<view class="flex align-end justify-center" style="height: 74rpx" v-if="item.type == 'discount'">
							<view class="coupon_money coupon_m">
								{{ Number(item.discount) }}
							</view>
							<view class="coupon_money juan_txt">折券</view>
						</view>
						<view class="flex align-end justify-center" v-else style="height: 74rpx">
							<view class="coupon_money juan_txt">￥</view>
							<view class="coupon_money coupon_m">
								{{ Number(item.price) }}
							</view>
							<view class="coupon_money juan_text">元券</view>
						</view>
						<view class="zhehou_jia f500 s22 family">
							{{ item.type == 'discount' ? '折' : '券' }}后
							<text :class="[navListIndex ? 'ysx' : 'red']">{{ Number(item.g_price) }}</text>
							元
						</view>
					</view>
				</view>
				<view class="bottom_box flex justify-between">
					<view class="store_name s24 family f500">
						{{ item.shop.shopname }}
					</view>
					<view class="flex align-center">
						<view class="s24 label" v-if="navListIndex == 0">未使用：{{ item.num }} 张</view>
						<view class="s24 label" v-else-if="navListIndex == 1">已使用：{{ item.num }} 张</view>
						<view class="s24 label" v-else-if="navListIndex == 2">已失效：{{ item.num }} 张</view>
						<view @click="goPage(item)" class="shi_btn s20 family f500 txtali" v-if="navListIndex == 0">去使用</view>
						<view class="shi_btn s20 family f500 txtali" style="background: #e6e6e6; box-shadow: none" v-if="navListIndex == 1">已使用</view>
						<view class="shi_btn s20 family f500 txtali" style="background: #999999; box-shadow: none" v-if="navListIndex == 2">已失效</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navList: [
				{
					name: '未使用'
				},
				{
					name: '已使用'
				},
				{
					name: '已失效'
				}
			],
			navListIndex: 0,
			page: 1,
			list: [],
			lastPage: 1
		};
	},
	onLoad() {
		this.getListData();
	},
	//触底事件
	onReachBottom() {
		this.page++;
		if (this.page > this.lastPage) {
			this.$wanlshop.msg('我是有底线的!');
		} else {
			this.getListData();
		}
	},
	methods: {
		goPage(item) {
			let ind = item.range;
			let cid = item.id;
			const currentTime = new Date().getTime();
			const startTime = new Date(item.startdate).getTime();
			if (currentTime < startTime) {
				return uni.showToast({
					title: '此商品活动未开始，当前优惠券不能使用！',
					icon: 'none'
				});
			}
			if (item.good.status == 'hidden') {
				return uni.showToast({
					title: '此商品已下架',
					icon: 'none'
				});
			}
			if (item.rangetype == 'goods') {
				// 商品
				uni.navigateTo({
					url: '/pages/filePages/goodsDetail/goodsDetail?id=' + ind + '&type=' + 0 + '&is_coupon=1' + '&coupon_id=' + cid + '&sku_id=' + ind
				});
			} else {
				// 婚纱
				uni.navigateTo({
					url: '/pages/filePages/goodsDetail/goodsDetail?id=' + ind + '&type=' + 1 + '&is_coupon=1' + '&coupon_id=' + cid
				});
			}
		},
		getListData() {
			uni.showLoading({
				title: '数据请求中···'
			});
			this.$request({
				url: 'coupon/getList',
				data: {
					status: this.navListIndex,
					page: this.page
				}
			}).then((res) => {
				const { code, data, msg } = res.data;
				if (code == 1) {
					this.list = this.list.concat(data.data);
					this.lastPage = data.last_page;
				} else {
					uni.showToast({
						title: msg,
						icon: 'error'
					});
				}
				uni.hideLoading();
			});
		},
		onNav(ind) {
			this.navListIndex = ind;
			this.page = 1;
			this.lastPage = 1;
			this.list = [];
			this.getListData();
		}
	}
};
</script>

<style scoped lang="scss">
.coupon {
	.header_box {
		height: 100upx;

		.nav_list_box {
			background: #fff;

			.auto_box {
				width: 96upx;
				margin-left: 116upx;

				.nav_list {
					color: #333;
					line-height: 100upx;
				}

				.nav_list_active {
					color: #f76054;
					line-height: 100upx;
				}

				.auto_xian {
					width: 55upx;
					height: 6upx;
					background-color: #f76054;
					margin: -8upx auto;
				}
			}
		}
	}
	.cop_warp {
		padding: 10rpx 32rpx 32rpx;
	}
	.cop_list_box {
		position: relative;
		width: 100%;
		padding: 20rpx;
		background-image: url(@/static/lijianquan.png);
		background-size: 100% 100%;
		margin-top: 20rpx;
		border-radius: 16rpx;
		box-sizing: border-box;
		box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);
		z-index: 1;
		.top_box {
			padding-bottom: 20upx;

			.left_box {
				background: #c4c4c4;
				border-radius: 8upx;
				overflow: hidden;
			}

			.con_txt {
				margin-left: 14upx;

				.con_name {
					font-weight: 500;
					height: 72upx;
					letter-spacing: 0;
					overflow: hidden;
					display: -webkit-box;
					text-overflow: ellipsis;
					line-height: 36upx;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.con_date {
					color: #999;
					margin-top: 12upx;
				}
			}

			.youhui_money_box {
				overflow: hidden;
				margin-left: 36upx;
				margin-right: 20rpx;

				.coupon_money {
					font-size: 48upx;
					color: #ff3f4a;
				}
				.red {
					color: #ff3f4a;
				}

				.zhehou_jia {
					height: 30rpx;
					color: #666;
					text-align: center;
					margin-top: 8upx;
				}

				.coupon_m {
					font-size: 56upx;
				}

				.juan_txt {
					font-size: 20rpx;
					padding-bottom: 12rpx;
				}
				.juan_text {
					font-size: 24rpx;
					padding-bottom: 12rpx;
					margin-left: 4rpx;
				}
			}
			.ysx {
				.coupon_money,
				.zhehou_jia {
					color: #999;
				}
			}
		}

		.bottom_box {
			border-top: 2rpx dashed #e4e4e4;
			padding-top: 20rpx;
			padding-right: 12rpx;
			.store_name {
				color: #999;
				line-height: 52rpx;
				flex: 1;
			}
			.label {
				color: #999;
			}
			.shi_btn {
				width: 100upx;
				height: 52upx;
				margin-left: 12rpx;
				background: #f76054;
				box-shadow: 0 0 8upx 2upx rgba(247, 96, 84, 0.6);
				border-radius: 26upx;
				color: #fff;
				line-height: 52upx;
			}
		}
	}

	.cop_list_box_two {
		background-image: url(@/static/zhekouquan.png);
	}
}
</style>
<style>
page {
	background-color: #f4f5f9;
}
</style>
